<template>
	<div>
		<el-button @click="addDept">添加</el-button>
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="30%"
		  :before-close="handleClose">
		  <span>
			<el-form ref="form" :model="form" label-width="80px">
			    <el-form-item label="部门名称">
			      <el-input v-model="form.denamr"></el-input>
			    </el-form-item>
			    <el-form-item label="地址">
			       <el-select v-model="form.loc" placeholder="请选择活动地址">
			        <el-option label="北京" value="北京"></el-option>
			        <el-option label="上海" value="上海"></el-option>
			       </el-select>
			    </el-form-item>
				
				<el-form-item>
				    <el-button type="primary" @click="onSubmit">立即创建</el-button>
				    <el-button>取消</el-button>
				</el-form-item>
			</el-form>
		  </span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  </span>
		</el-dialog>
		
		
		<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
			<el-table-column prop="deptno" label="日期" width="180">
			</el-table-column>
			<el-table-column prop="denamr" label="名称" width="180">
			</el-table-column>
			<el-table-column prop="loc" label="地址">
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div class="block">
		  <span class="demonstration">页面</span>
		   <!-- :pager-count="5" 页数大于5会这折叠 -->
		  <el-pagination
		  :page-size="5"
			:pager-count="5"
			:page-sizes="[10, 20, 30, 40, 50, 100]"
		    layout="prev, pager, next"
		    :total="50"
			>
		  </el-pagination>
		</div>
	
	</div>
</template>
<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>

<script>
	// 引入qs
	import qs from 'qs';
	export default {
		methods: {
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex % 2 === 3) {
					return 'success-row';
				}
				return '';
			},
			queryData() {
				// 后台发出请求
				this.$axios.get("page"+"?curr=2&size=5").then(r => {
					// 将后端返回的数据给tableData
					this.tableData = r.data.records;
					// alert(JSON.stringify(this.tableData))
				})
			},
			handleClose(done) {
					this.$confirm('确认关闭？')
					  .then(_ => {
						done();
					  })
					  .catch(_ => {});
				  },
			// 点击添加显示弹窗
			addDept(){
				this.dialogVisible = true;
			},
			onSubmit(){
				// 发出请求将输入框数据输出去
				// 用qs发出记得引入
				this.$axios.post("addDept",qs.stringify(this.form)).then(r=>{
					  this.$message({
					          message: r.data.msg,
					          type: 'success'
					        });
					this.dialogVisible = false;
					this.queryData();
				})
			}
		
		},
		data() {
			return {
				pageSize:5,
				tableData: [],
				dialogVisible: false,
				// 弹窗用
				form:{},
			}
		},
		created() {
			// 返回这个文件没有人调用这个数据，所以设置一个调用
			this.queryData();
		},
		
	}
</script>
